<template>
  <div class="item">
    <div v-if="type === 1" class="item1">
      <h3>{{ v.title }}</h3>
      <div>
        <img :src="v.avatar" width="20" height="20">
        <span>{{ v.nickname }}</span>
      </div>
      <div class="content">
        {{ v.content }}
      </div>
      <div>
        <span>{{ v.like }} 赞同</span>
        <span>{{ v.message }} 评论</span>
      </div>
    </div>
    <div v-if="type === 2" class="item2">
      <h3>{{ v.title }}</h3>
      <div class="con">
        <div>
          <div>
            <img :src="v.avatar" alt="" width="20" height="20" style="border-radius: 50%;">
            <span>{{ v.nickname }}</span>
          </div>
          <div class="content">
            {{ v.content }}
          </div>
          <div>
            <span>{{ v.zan }} 赞同</span>
            <span>{{ v.message }} 评论</span>
          </div>
        </div>
        <div>
          <img :src="v.image" alt="" width="100" height="100">
        </div>
      </div>
    </div>
    <div v-if="type === 3" class="item3">
      <h3>{{ v.title }}</h3>
      <div>
        <img :src="v.avatar" alt="" width="20" height="20" style="border-radius: 50%;">
        <span>{{ v.nickname }}</span>
      </div>
      <van-image  :src="v.image" lazy-load alt="" width="100%" height="200" />
      <div class="content">
        {{ v.content }}
      </div>
      <div>
        <span>{{ v.like }} 赞同</span>
        <span>{{ v.message }} 评论</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

defineProps(['type', "v"])
</script>


<style lang="scss">

.item {
  background-color: #333;
  color: white;
}
.item1, .item3 {
  margin-bottom: 10px;
  padding: 10px;
  .content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    /* 显示的行数 */
    text-overflow: ellipsis;
  }
}

.item2 {
  margin-bottom: 10px;
  padding: 10px;
  .con {
    display: flex;

    .content {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 3;
      /* 显示的行数 */
      text-overflow: ellipsis;
    }
  }
}


</style>

